<template>
	<a-form
		:model="userInfo"
		name="basic"
		:label-col="{ span: 2 }"
		:wrapper-col="{ span: 5 }"
		autocomplete="off"
		@finish="onFinish(userInfo)"
	>
		<a-form-item
			label="账号"
			name="username"
			:rules="[{ required: true, message: '请输入账号!' }]"
		>
			<a-input v-model:value="userInfo.username" />
		</a-form-item>

		<a-form-item
			label="密码"
			name="password"
			:rules="[{ required: true, message: '请输入密码!' }]"
		>
			<a-input-password v-model:value="userInfo.password" />
		</a-form-item>

		<a-form-item
			label="角色名称"
			name="roleId"
			has-feedback
			:wrapper-col="{ offset: 0, span: 5 }"
			:rules="[{ required: true, message: '请选择角色名称!' }]"
		>
			<el-select
				v-model="userInfo.roleId"
				class="m-2"
				placeholder="请选择角色名称"
			>
				<el-option
					v-for="item in roleNameList"
					:key="item.objectId"
					:label="item.roleName"
					:value="item.objectId"
				/>
			</el-select>
		</a-form-item>
		<a-form-item :wrapper-col="{ offset: 2, span: 5 }">
			<a-button type="primary" html-type="submit">注册</a-button>
		</a-form-item>
	</a-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { roleInfoGet } from "../../api/role";
import { roleInfoType } from "../../types/roleInfo";
import { userRegType } from "../../types/userInfo";
import { userReg } from "../../api/user";
let roleNameList = ref<any>([]);

//角色表查询
roleInfoGet().then((res) => {
	roleNameList.value = res.data.results;
});

let userInfo = reactive<userRegType>({
	username: "",
	password: "",
	key: 1,
	roleId: "",
});

const onFinish = (userInfo: userRegType) => {
	userReg(userInfo).then((res) => {
		history.go(0);
	});
};
</script>
